<template>
	<view class="content">
		<view class="content2">				
		<view class="chance">
			<view class="chance1" @click="showtime0" v-if="alltime <= 0">
				 获取抽奖机会
			</view>
			<view class="chance2" v-if="alltime > 0">
				 剩余 {{alltime}} 次抽奖次数				
			</view>
		</view>
		<view class="main">
		
			<image src="../static/images/jiantou.png" mode="scaleToFill" style="width: 157upx;height: 178upx;position: absolute;z-index: 70;" class="center-img" @click="start"></image>
			<view class="innerBox2" :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +ss+'s ;'  ">
				<!-- {{arr}} -->
				<view v-if="deg2 != 90" v-for="(item,index) in arr" :key="index" class="innerBox2B" :style=" 'transform: rotate(' +item.deg+ 'deg);left:'+boxWidth2+'rpx;width:' +boxWidth+'rpx;-webkit-clip-path: polygon(0 0,100% 0, 50% 100%);clip-path: polygon(0 0,100% 0, 50% 100%);' " >
					{{item.prizename}}
					<view class="innerBox2BImg">
						<image style="width: 50upx;height: 50upx;" :src="item.icon" mode=""></image>
					</view>
				</view>	
				
				<view v-if="deg2 == 90" v-for="(item,index) in arr" :key="index" class="innerBox2B" :style=" 'transform: rotate(' +item.deg+ 'deg);width:' +boxWidth+ 'rpx;' " >
					{{item.prizename}}
					<view class="innerBox2BImg">
						<!-- 积分1 -->
						<image v-if="item.receivetype == 1 & item.value!=0" style="width: 50upx;height: 50upx;" src="../static/images/jifen.png" mode=""></image>
						
						<!-- 红包2 -->
						<image v-if="item.receivetype == 2" style="width: 50upx;height: 50upx;" src="../static/images/hongbao.png" mode=""></image>
					
						<!-- 优惠券3 改成了商品-->
						<image v-if="item.receivetype == 3 || item.receivetype == 4" style="width: 50upx;height: 50upx;" src="../static/images/quan.png" mode=""></image>
						
						<!-- 谢谢惠顾receivetype 1 value 0 -->
						<image v-if="item.receivetype == 1 & item.value == 0" style="width: 50upx;height: 50upx;" src="../static/images/nanguo.png" mode=""></image>
					</view>
				</view>
						
						
			</view>
		</view>
		
		<uni-popup style="z-index: 999999999;" ref="popup0" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: -34px" src="../static/images/close.png" mode=""></image>
				<image @click.stop style="width: 450upx;height: 560upx;" src="../static/images/surprise0xxhg.png" mode=""></image>
				<view class="useOntime" @click.stop="closeModal">
					 再来一次
				</view>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup1" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>
				<image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="activeImg" mode=""></image>
				<view style="position: relative;margin-top: -200upx;color:#ff6c00;font-size: 36upx;" class="tac">				
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 {{point}} 积分
				</view>
				<view style="position: relative;margin-top: 20upx;color:#999999;font-size:27upx;" class="tac">						
					请在 商城积分 中查看
				</view>
				<view class="useOntime">
					 <navigator url="../shopgold/gouwujinLis">立即使用</navigator>
				</view>
			</view>
		</uni-popup>

		<uni-popup style="z-index: 999999999;" ref="popup2" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>
				<image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="activeImg" mode=""></image>
				<view style="color: #ff6c00;position: absolute;font-size: 36upx;top: 406upx;width: 100%;height: 60upx;text-align: center;" class="">
					<!-- {{point}}元 -->
				</view>
				<view style="position: relative;margin-top: -180upx;color:#ff6c00;font-size: 36upx;" class="tac">
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 {{point}}元 购物红包
				</view>
				<view style="color:#999999;font-size:27upx;" class="tac">						
					请在 我的-积分商城 中查看
				</view>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup3" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>				    
				<image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="activeImg" mode=""></image>
				<view style="position: relative;margin-top: -200upx;color:#ff6c00;font-size: 36upx;" class="tac">
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 商品 1件
				</view>
				
				<view style="margin-top: 90upx;" class="useOntime" @click.stop="TosetAdd">
					 添加收货地址
				</view>
			</view>
			
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup4" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>
				<image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="activeImg" mode=""></image>
				<view style="position: relative;margin-top: -200upx;color:#ff6c00;font-size: 36upx;" class="tac">				
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得代金券一张
				</view>
			 <view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">
			  
			 </view>
				<view @click="gotTicket" style="margin-top: 120upx;" class="useOntime">
					 <text url="">立即使用</text>
				</view>
			</view>
		</uni-popup>
		
		
		
		<view style="text-align: center;" class="">
			<view class="zhongjiang">
				<!-- <marquee v-cloak behavior="" direction="">{{marq}}</marquee>				 -->
				<view style="width: 500upx;height: 68upx;overflow: hidden;" class="">
					<view class="page-section-spacing">
						<swiper class="swiper1" 
							:disable-touch="disableTouch"
							vertical="true"
							:circular="circular"
							:indicator-dots="indicatorDots"
							autoplay="true" 
							interval="4000" 
							duration="400"	>					
							<swiper-item v-for="(aa,index) in marq" :key="index">								
							{{hiddenTel(aa.member_name,2,3)}} - {{aa.prize}} - {{aa.addtime}}
							</swiper-item>		
						</swiper>				
					</view>
				</view>	
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;padding:10upx 120upx;">
			<view style="font-weight: 400;color: #f0FFFF;font-size: 36upx;">
				<navigator url="MyPrize">我的奖品</navigator>				
			</view>
			<view style="font-weight: 400;color: #FFFFFF;font-size: 36upx;">
				|
			</view>
			<view style="font-weight: 400;color: #FFFFFF;font-size: 36upx;">
				<navigator url="activityRules">活动规则</navigator>				
			</view>			
		</view>
		</view>	
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	
	// #ifdef H5
		const share = require("@/store/share.js")
	// #endif
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				voucher:{},
				lid:"",
				activeImg:"",
				returnnum:"",
				disableTouch:true,
				productName:"",
				point:"",
				indicatorDots:false,
				circular:true,
				id:0,
				value:"",
				deg2:0,
				boxWidth2:0,
				boxWidth:0,
				alltime:3,
				showTitle: true,
				modal: false, // 展示modal模块
				modalTxt: '', // 奖品
				ss: 5, // 旋转所用时间
				deg: 0,// 旋转角度
				arr : [],
				luck:false,
				surpriseType:5,
				marq:[],
				consumePoint:"",
				isDisable:false,
				aid:"",
				info:""
			};
		},
		onLoad(options) {
			this.id=options.id
			this.getInfo()
			this.getfrequency()
			if(options.lid&&options.aid){
				this.lid=options.lid;
				this.aid=options.aid;
				this.setadderss();
			}
		
		},
		onShow() {
			this.luck = false
		},
		methods:{
			gotTicket(){
				let store_id = this.voucher.voucher_t_store_id
				let voucher_t_range =this.voucher.voucher_t_range
				let voucher_t_rangeid =this.voucher.voucher_t_rangeid
				let gc_name =this.voucher.gc_name
				console.log(store_id,voucher_t_range,voucher_t_rangeid,gc_name)
				var that=this	
				if(voucher_t_range==0){
					if(store_id){
						uni.navigateTo({
							url:"/mall/store/store?store_id="+store_id
						})
					}else{
						uni.switchTab({
							url:"/main/home/index"
						})
					}
					
				}else if(voucher_t_range==1){//商品
					if(this.voucher.is_more_goods==1){
						uni.navigateTo({
							url:'/operation/voucher/productsLists?voucher_t_id='+this.voucher.voucher_t_id
						})
					}else{
						if(voucher_t_rangeid){
							uni.navigateTo({
								url:"/mall/goods/info?goods_id="+voucher_t_rangeid.split(",")[0]
							})
						}
					}
					
			
				}else if(voucher_t_range==2){//分类
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+voucher_t_rangeid+"&index="+gc_name
					})
				}
			
			},
			TosetAdd(){//去选择地址
				uni.navigateTo({
					url:"/member/address/list?type=bigCircle&lid="+this.lid+"&id="+this.id
				})			
			},
			setadderss(){//设置收货地址
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=sendinfo_save',
					method: 'post',
					data: {
						lid:this.lid,
						aid:this.aid,
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.showToast({
							title:"设置成功",
							icon:"none"
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			toaddress(){
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=index',
					method: 'get',
					data: {
						"lid":this.lid
					},
				}).then((res)=> {
					if(res.error_code == 0){
						uni.navigateTo({
							url:"activeAddress?lid="+this.lid
						})						
					}
				})
				
			},
			getInfo(){//获取页面信息
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=index',
					method: 'get',
					data: {
						"id":this.id
					},
				}).then((res)=> {
					if(res.error_code == 0 && Number(res.datas.info.activity_type) == 1){
						this.info=res.datas.info
						this.consumePoint=res.datas.info.consumePoint
						this.arr=res.datas.info.items
						this.id=res.datas.info.id
						this.deg2=180/res.datas.info.items.length
						// #ifdef H5
							let shareInfo={
								title: this.info.bigwheel_title , // 分享标题
								desc: this.info.share_desc, // 分享描述  
								link:  this.$share+"/#/operation/prize/bigCircle?id="+this.id, // 分享链接  
								imgUrl: this.info.share_img, // 分享图标       
							}
								share.share(shareInfo)
						// #endif
						if(this.deg2 == 90){
							//两个
							this.boxWidth=544
										
						}else if(this.deg2 == 60){
							//三个
							this.boxWidth=942
							this.boxWidth2=-198
						}else{					
							this.boxWidth= parseInt(544*(Math.tan(this.deg2*Math.PI/180))) 
							if(this.arr.length == 4){
								this.boxWidth2=0
							}
							if(this.arr.length == 5){
								this.boxWidth2=74
							}
							if(this.arr.length == 6){
								this.boxWidth2=110
							}
							if(this.arr.length == 7){
								this.boxWidth2=142
							}
							if(this.arr.length == 8){
								this.boxWidth2=162
							}
							if(this.arr.length == 9){
								this.boxWidth2=169
							}
						}
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					this.$util.request({//获取中将记录
						url: '/mobile/index.php?act=bigwheel&op=prizeLog',
						method: 'post',
						data: {
							"id":this.id
						},
					}).then((res)=> {
						this.marq=res.datas.list
					})
					
				})
			},
			getfrequency(){	//获取会员剩余抽奖次数
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=canDrawCount',
					method: 'get',
					data: {
						"id":this.id
					},
				}).then((res)=> {
					this.alltime=res.message.left_count
				})
			},
			showtime0(){
				uni.showToast({
					title:"购买商品可抽奖",
					icon:"none"
				})
			},
			hiddenTel(str,frontLen,endLen) {
			   var len = str.length-frontLen-endLen;
			   var xing = '';
			   for (var i=0;i<len;i++) {
			   xing='***';
			  }
			   return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
			},
			play(num) {				
				this.deg =  360 * 3 + this.arr[num].deg + 20
				setTimeout(()=> {
					this.showResult(this.arr[num])
					this.surpriseType=this.arr[num].surprise
				}, this.ss * 1000);
			},
			
			start() {
				if(this.isDisable){
					return false;
				}
				this.isDisable=true
				if(this.alltime<=0 && Number(this.consumePoint) && this.info.is_order_draw!=1){
					uni.showModal({
						title:'提示',
						content:'是否使用'+this.consumePoint+'积分进行抽奖',
						success: (res2) => {
							if(res2.confirm){
								this.draw();
							}else if(res2.cancel){
								return false
							}
						}
					})
				}else{
					this.draw();
				}
			},
			
			draw(){
				let that=this
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=prize_num',
					method: 'post',
					data: {
						"id":this.id
					},
				}).then((res)=> {
					if(res.error_code == 0){
						this.returnnum=Number(res.message.prize_level)
						if(res.message.lid){
						  this.lid=Number(res.message.lid)							
						}
						
						this.activeImg=this.arr[this.returnnum].icon
						if(this.alltime>0){
							this.alltime--;
						}
						//返回 索引+1
						var aa=Number(res.message.prize_level)
						//反着转的
						// var dd=this.arr.length-aa
						var dd=this.arr.length-res.message.prize_level
						//-0.5 - 0.5随机数
						let bb=(Math.random()*2-1)/2
						
						let num = Math.floor(bb * this.arr[1].deg)+this.arr[dd-1].deg
						
						console.log('num:'+num)
						 this.deg =  360 * 3 + num +this.arr[1].deg
						setTimeout(()=> {
							// this.showResult(this.arr[aa])
							this.surpriseType=this.arr[aa].receivetype
							this.isDisable=false
							if(this.arr[aa].receivetype == 0){
								this.$refs.popup0.open();
								// this.point=this.arr[aa].points
							}else if(this.arr[aa].receivetype == 1){
								this.$refs.popup1.open();
								this.point=this.arr[aa].points
							}else if(this.arr[aa].receivetype == 2){
								this.$refs.popup2.open();
								this.point=res.message.wxrp_amount
							}else if(this.arr[aa].receivetype == 3){
								this.$refs.popup3.open();
								this.point=this.arr[aa].goods_name
							}else if(this.arr[aa].receivetype == 4){
								this.$refs.popup4.open();
								this.point=this.arr[aa].goods_name
								this.voucher=res.message.voucher
							}
							
						}, this.ss * 1000);
					}
					else if(res.error_code==100010){
						this.isDisable=false
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					else{
						this.isDisable=false
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					
				})
			},
			
			//　展示结果
			showResult(data) {
				this.isDisable=false
				this.modal= true
				this.showTitle = data.showTitle
				this.modalTxt = data.msg				
			},
			
			//　关闭
			closeModal() {
				this.isDisable=false
				this.surpriseType=5
				this.$refs.popup0.close()
				this.$refs.popup1.close()
				this.$refs.popup2.close()
				this.$refs.popup3.close()
				this.$refs.popup4.close()
				this.luck = false
				let s = this.ss
				// this.modal = false
				this.ss = 0
				this.deg = 0				
				setTimeout(() => {
					this.ss = s
				}, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
		width: 100%;
		min-height: 100%;
	}
	.content2{
		background-image: url(../static/images/zpCircle.png) 50upx;
	}
	.content {
		box-sizing: border-box;
		width: 100%;
		height: 115vh;
		background-size: cover;
		overflow: hidden;
		padding-bottom: 90upx;
		// background-color: #ff7e9c;
		
		background-image: url(../static/images/zpBgc.jpg);
		background-position: center;
		.main {
			position: relative;
			width: 624upx;
			height: 624upx;
			margin: 30upx auto 39upx;
			.turntable {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				// animation: rotateArc 5s cubic-bezier(0.61, 0.08, 0.35, 0.83);
				transform: rotate(0deg);
				z-index: 12;
				transition-timing-function: ease;
				transition-property: all;
				
				// transition: all 10s ease;
			}
			.center-img {
				position: absolute;
				top: 220upx;
				right: 0;
				left: 0;
				margin: auto;
				z-index: 99;
			}
			.shadow {
				position: absolute;
				bottom: -30upx;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 1;
			}
		}
		.h1 {
			font-size: 32upx;
			text-align: center;
			color: #fff;
		}
		.h2 {
			width: 450upx;
			font-size: 22upx;
			color: #fff;
			margin-bottom: 22upx;
			margin: auto;
		}
		.modal.show {
			display: block;
		}
		.modal {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0,0,0, .4);
			z-index: 100;
			display: none;
			.modal-body.show {
				animation: scaleFrames .4s cubic-bezier(.5,.49,.57,1.41) forwards;
			}
			.modal-body {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 544upx;
				height: 570upx;
				background-size: 100% 100%;
				background-image: url('../static/images/zhuanpan_tanchaung@2x.png');
				padding: 1upx;
				transform: scale(0);
				.txt1 {
					font-size:60upx;
					font-family:Source Han Sans CN;
					font-weight:500;
					color:rgba(255,255,255,1);
					line-height:104upx;
					text-shadow:0upx -5upx 10upx rgba(253,49,58,0.5);
					text-align: center;
				}
				.txt2 {
					font-size:60upx;
					font-family:Source Han Sans CN;
					font-weight:500;
					color:rgba(255,234,58,1);
					line-height:121upx;
					text-align: center;
				}
				.close {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -68upx;
					margin: auto;
				}
			}
		}
	}
	
	
	@keyframes scaleFrames{
		from{
			transform: scale(0);
		}
		to{
			transform: scale(1);
		}
	}
	
	@keyframes rotateArc{
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(3600deg);
		}
	}
	
	.chance1{
		margin: 460upx auto 0;
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 100upx;
		height: 100upx;
		width: 310upx;
		border-radius: 50upx;
	    background-image: -webkit-linear-gradient(#fc6a75, #fe659a);
		font-weight: bold;
	}
	.useOntime{
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 100upx;
		height: 100upx;
		width:250upx;
		border-radius: 50upx;
		background-image: -webkit-linear-gradient(#fc6a75, #fe659a);
		font-weight: bold;
		margin: 40upx auto;
	}
	.chance2{
		display: block;
		margin: 460upx auto 0;
		font-size: 36upx;
		color: #fc4b5f;
		text-align: center;
		width: 480upx;
		line-height: 70upx;
		height: 84upx;
		border-radius: 50upx;	    
		font-weight: bold;
		background: url(../static/images/yellowBgc.png);
		background-position: center center; 
		background-size: contain;
		background-repeat: no-repeat;
	
		
	}
	.zhongjiang{
		display: inline-block;
		background-color: #ff94aa;
		color: #fff;
		font-size: 36upx;
		text-align: center;
		line-height: 68upx;
		height: 68upx;
		padding: 0 30upx;
		border-radius: 34upx;
		margin-top: -60upx;
	}
	.innerBox2{
		text-align: center;
		position: relative;
		z-index: 50;
		width: 544upx;
		height:544upx;
		left: 40upx;
		top: 40upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
		
	}
	.innerBox2B{
		box-sizing: border-box;
		font-weight: 400;
		font-size: 36upx;
		padding-top: 20upx;
		// left: 160upx;
		left: 0upx;
		position: absolute;
		display: inline-block;
		// width: 225upx;
		height: 272upx;
		background-color: transparent;
		transform-origin:  center bottom;
		overflow: hidden;
		
	}
	.innerBox2B:nth-child(2n){
		background-color: #f0f1ff;
	}
	.innerBox2B:nth-child(1){
		// background-color: #f0f1ff;
	}
	
	.innerBox2BImg{
		
	}
	.surprise{
		box-sizing: border-box;		
		text-align: center;
		vertical-align: middle;
		position: fixed;
		width: 100%;
		height: 101vh;
		margin-top: -95vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 99;
		overflow: hidden;	
	}
	.surprise0{
		text-align: center;
		padding-top: 550upx;
	}
	.surprise1{
		padding-top: 350upx;
		text-align: center;
	}
	.surprise2{
		padding-top: 350upx;
		text-align: center;
	}
	.surprise3{
		padding-top: 350upx;
		text-align: center;
	}
	.tac{
		text-align: center;
	}
	.swiper1{
		padding-top: 10upx;
		height: 68upx;
	}
</style>
